import React, { Component } from 'react';

import { modalError, messageError } from 'utils/feedbacks';

import { 
  Form, 
  Input, 
  Table, 
  Button,
  Spin,
  Modal,
  Radio,
} from 'antd';

import styles from './index.css';

const { TextArea } = Input;

/**
 * 白名单管理:新增
 */
class Index extends Component {

  render() {
    const { getFieldDecorator } = this.props.form;
    const { visible } = this.props.modalState;
    
    return (
      <Modal
        title="新增"
        visible={visible}
        wrapClassName={styles.choise_modal}
        closable={false}
        maskClosable={false}
        destroyOnClose={true}
        onCancel={this.formCanceledHandler}
        onOk={this.formSubmittedHandler} >
        
        <Form className={styles.lesson_form}>
          <Form.Item label='名称'>
            {
              getFieldDecorator('name', {
                // 校验规则
                rules: [
                  { required: true, message: '名称不能为空' },
                ],
              })
                (
                  <Input type="text" allowClear placeholder='请输入名称' />
                )
            }
          </Form.Item>
          <Form.Item label='KeyID'>
            {
              getFieldDecorator('keyID', {
                // 校验规则
                rules: [
                  { required: true, message: 'KeyID不能为空' },
                ],
              })
                (
                  <Input type="text" allowClear placeholder='请输入KeyID' />
                )
            }
          </Form.Item>
          <Form.Item label='KeySecret'> 
            {
              getFieldDecorator('keySecret', {
                // 校验规则
                rules: [
                  { required: true, message: 'KeySecret不能为空' },
                ],
              })
                (
                  <Input type="text" allowClear placeholder='请输入KeySecret' />
                )
            }
          </Form.Item>
          <Form.Item label='IP地址:'>
            {
              getFieldDecorator('address', {
                // 禁止用户输入空格
                getValueFromEvent: event => event.target.value.replace(/[\u4e00-\u9fa5]/g,''),

                // 校验规则
                rules: [
                  { required: true, message: 'IP地址不能为空' },
                  { pattern: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/ , message: 'IP地址格式错误'}
                ],
              })
                (
                  <Input type="text" allowClear placeholder="请输入IP地址"/>
                )
            }
          </Form.Item>
          <Form.Item label='状态'>
            {
              getFieldDecorator('status', {
                initialValue: 'ON',
                rules: [
                  { required: true, message: '状态不能为空!' },
                ],
              })
              (
                <Radio.Group>
                  <Radio value="ON">启用</Radio>
                  <Radio value="OFF">禁用</Radio>
                </Radio.Group>
              )
            }
          </Form.Item>
          <Form.Item label='备注'>
            {
              getFieldDecorator('remarks', {
              })(
                <TextArea rows={4} placeholder="请输入备注"/>
              )
            }
          </Form.Item>
        </Form>
        
      </Modal>

    )
  }

  /**
   * 关闭按钮点击事件
   */
  formCanceledHandler = () => {
    !!this.props.onCancel && this.props.onCancel();
  }

  /**
   * 数据验证成功后回调事件
   */
  formSubmittedHandler = (event) => {
    // 关闭表单的默认提交行为
    event.preventDefault();

    // 表单数据校验
    const { form } = this.props;
    form.validateFields((error) => {
      // 验证有错, 则自然报错
      if(!!error) return;

      // 如果校验没错, 则收集表单数据, 提交
      const fieldsValue = form.getFieldsValue();
      !!this.props.onConfirm && this.props.onConfirm(fieldsValue);
    });
  }

}

export default Form.create ({}) (Index);
